// 一小时的毫秒数
const ONE_HOUR_STAMP = 60 * 60 * 1000;
// 时间分辨率
const ZOOM = [0.5, 1, 2, 6, 12, 24];

let SECTION_LIST = [];
import moment from "moment";

export default {
    data() {
        return {
            //时间分辨对应的层级
            currentZoomIndex: 0,
            // 中间刻度的当前时间 (默认为当天的0点减12小时，即昨天中午12点,若有操作时间则为操作后的时间)
            // currentTime: new Date(moment().format("YYYY-MM-DD 00:00:00")).getTime(),
            currentTime: new Date(moment().format("YYYY-MM-DD 00:00:00")).getTime() -
                0.25 * ONE_HOUR_STAMP +
                15 * 60 * 1000,
            // 时间轴左侧起点所代表的时间，默认为当天的0点减12小时，即昨天中午12点
            // startTimestamp: new Date(moment().format("YYYY-MM-DD 00:00:00")).getTime() -
            //     12 * ONE_HOUR_STAMP +
            //     15 * 60 * 1000,
            startTimestamp: new Date(moment().format("YYYY-MM-DD 00:00:00")).getTime() -
                0.5 * ONE_HOUR_STAMP +
                15 * 60 * 1000,
            width: null, //画布容器宽度
            height: null, //画布容器高度
            mousedown: false, // 移动开关
            ctx: null, //画布容器
            mousedownX: null, // 鼠标相当于时间轴左侧的距离
            //时间段数据 
            timeSegments: [{
                beginTime: new Date("2023-02-18 02:30:00").getTime(),
                endTime: new Date("2023-02-18 11:20:00").getTime(),
                style: {
                    background: "#5881CF",
                },
            }, ],
            timer: null, //定时器
            // 时间轴结束
        };
    },
    mounted() {
        // this.$nextTick(() => {
        //     this.init()
        // })
    },
    methods: {
        // 时间轴开始
        init() {
            // 获取外层宽高
            let { width, height } = this.$refs.timeLineContainer.getBoundingClientRect();
            this.width = width;
            this.height = height;
            // 设置画布宽高为外层元素宽高
            this.$refs.canvas.width = width;
            this.$refs.canvas.height = height;
            // 获取画图上下文
            this.ctx = this.$refs.canvas.getContext("2d");
            //绘制
            this.draw();
        },
        draw() {
            this.drawScaleLine(); //绘制时间刻度
            this.drawTimeSegments(); //绘制时间段
            this.drawMiddleLine(); //绘制中线  绘制原则  想要谁的层级再最上面的随后绘制 前提是层级一样的时候
        },
        // 画中间的白色竖线
        drawMiddleLine() {
            //中线的宽度
            let lineWidth = 2;
            // 线的x坐标是时间轴的中点，y坐标即时间轴的高度
            let x = this.width / 2;
            //划线
            this.drawLine(x, 0, x, this.height - 10, lineWidth, "#fff");
        },
        // 画线段方法
        drawLine(x1, y1, x2, y2, lineWidth, color) {
            // 开始一段新路径
            this.ctx.beginPath();
            // 设置线段颜色
            this.ctx.strokeStyle = color || "#fff";
            // 设置线段宽度
            this.ctx.lineWidth = lineWidth || 1;
            // 将路径起点移到x1,y1
            this.ctx.moveTo(x1, y1);
            // 将路径移动到x2,y2
            this.ctx.lineTo(x2, y2);
            // 把路径画出来
            this.ctx.stroke();
        },
        //画刻度
        drawScaleLine() {
            // 时间分辨率对应的每格小时数
            const ZOOM_HOUR_GRID = [1 / 60, 1 / 60, 2 / 60, 1 / 6, 0.25, 0.5];

            // 一共可以绘制的格数，时间轴的时间范围小时数除以每格代表的小时数，24/0.5=48
            let gridNum =
                ZOOM[this.currentZoomIndex] / ZOOM_HOUR_GRID[this.currentZoomIndex];

            // 一格多少毫秒，将每格代表的小时数转成毫秒数就可以了  ;
            let msPerGrid = ZOOM_HOUR_GRID[this.currentZoomIndex] * ONE_HOUR_STAMP;

            // 每格宽度，时间轴的宽度除以总格数
            let pxPerGrid = this.width / gridNum;

            // 时间偏移量，初始时间除每格时间取余数，
            let msOffset = msPerGrid - (this.startTimestamp % msPerGrid);
            // 距离偏移量，时间偏移量和每格时间比例乘每格像素
            let pxOffset = (msOffset / msPerGrid) * pxPerGrid;

            // 时间分辨率对应的时间显示判断条件
            const ZOOM_DATE_SHOW_RULE = [
                () => {
                    // 全都显示
                    return true;
                },
                (date) => {
                    // 每五分钟显示
                    return date.getMinutes() % 5 === 0;
                },
                (date) => {
                    // 显示10、20、30...分钟数
                    return date.getMinutes() % 10 === 0;
                },
                (date) => {
                    // 显示整点和半点小时
                    return date.getMinutes() === 0 || date.getMinutes() === 30;
                },
                (date) => {
                    // 显示整点小时
                    return date.getMinutes() === 0;
                },
                (date) => {
                    // 显示2、4、6...整点小时
                    return date.getHours() % 2 === 0 && date.getMinutes() === 0;
                },
            ];

            for (let i = 0; i < gridNum; i++) {
                // 横坐标就是当前索引乘每格宽度
                let x = pxOffset + i * pxPerGrid;
                // 当前刻度的时间，时间轴起始时间加上当前格子数乘每格代表的毫秒数
                let graduationTime = this.startTimestamp + msOffset + i * msPerGrid;
                // 时间刻度高度  根据刻/时/月展示高度不同  具体可以自己去定义
                let h = 0;
                let date = new Date(graduationTime);
                if (date.getHours() === 0 && date.getMinutes() === 0) {
                    // 其他根据判断条件来显示
                    h = this.height * 0.3;
                    // 刻度线颜色
                    this.ctx.fillStyle = "rgba(151,158,167,1)";
                    // 显示时间
                    this.ctx.fillText(
                        this.graduationTitle(graduationTime),
                        x - 13, // 向左平移一半
                        h + 15 // 加上行高
                    );
                } else if (ZOOM_DATE_SHOW_RULE[this.currentZoomIndex](date)) {
                    h = this.height * 0.2;
                    this.ctx.fillStyle = "rgba(151,158,167,1)";
                    this.ctx.fillText(
                        this.graduationTitle(graduationTime),
                        x - 13,
                        h + 15
                    );
                } else {
                    // 其他不显示时间
                    h = this.height * 0.15;
                }
                this.drawLine(x, 0, x, h, 1, "#fff");
            }
        },
        //格式时间的，在0点时显示日期而不是时间
        graduationTitle(datetime) {
            let time = moment(datetime);
            // 0点则显示当天日期
            if (
                time.hours() === 0 &&
                time.minutes() === 0 &&
                time.milliseconds() === 0
            ) {
                return time.format("MM-DD");
            } else {
                // 否则显示小时和分钟
                return time.format("HH:mm");
            }
        },
        //鼠标按下的操作
        onMousedown(e) {
            let { left } = this.$refs.canvas.getBoundingClientRect();
            // 也是计算鼠标相当于时间轴左侧的距离
            this.mousedownX = e.clientX - left;
            // 设置一下标志位
            this.mousedown = true;
            // 缓存一下鼠标按下时的起始时间点
            this.mousedownCacheStartTimestamp = this.startTimestamp;
        },
        // 鼠标移动事件
        onMousemove(e) {
            // 计算出相对画布的位置
            let { left } = this.$refs.canvas.getBoundingClientRect();
            let x = e.clientX - left;
            // 计算出时间轴上每毫秒多少像素
            const PX_PER_MS =
                this.width / (ZOOM[this.currentZoomIndex] * ONE_HOUR_STAMP); // px/ms
            //拖拽时候
            if (this.mousedown) {
                // 计算鼠标当前相当于鼠标按下那个点的距离
                let diffX = x - this.mousedownX;
                // 用鼠标按下时的起始时间点减去拖动过程中的偏移量，往左拖是负值，减减得正，时间就是在增加，往右拖时间就是在减少
                this.startTimestamp =
                    this.mousedownCacheStartTimestamp - Math.round(diffX / PX_PER_MS);
                // 不断刷新重绘就ok了
                this.ctx.clearRect(0, 0, this.width, this.height);
                this.draw();
            } else {
                // 计算所在位置的时间  平移时候
                let time = this.startTimestamp + x / PX_PER_MS;
                // 清除画布
                this.ctx.clearRect(0, 0, this.width, this.height);
                this.draw();
                // 绘制实时的竖线及时间
                this.drawLine(x, 0, x, this.height * 0.3, "#fff", 1);
                this.ctx.fillStyle = "#fff";
                this.ctx.fillText(
                    moment(time).format("YYYY-MM-DD HH:mm:ss"),
                    x - 20,
                    this.height * 0.3 + 20
                );
            }
        },

        //鼠标起来的操作
        onMouseup() {
            // 设置一下标志位 移动取消
            this.mousedown = false;
            //中间刻度距离左侧画布左侧距离
            let x = this.width / 2;
            // 计算出时间轴上每毫秒多少像素
            const PX_PER_MS =
                this.width / (ZOOM[this.currentZoomIndex] * ONE_HOUR_STAMP); // px/ms
            // 计算中间位置刻度的时间位置的时间
            this.currentTime = this.startTimestamp + x / PX_PER_MS;
            //   console.log(this.currentTime);

            //   let startTime = Date.now() - 3600*1000*24;
            // let startTime = this.startTimestamp + x / PX_PER_MS;
            this.getSection()

        },
        //鼠标移出事件
        onMouseout() {
            // 清除画布
            this.ctx.clearRect(0, 0, this.width, this.height);
            //重新绘制画布
            this.draw();
        },
        //鼠标滚动事件
        onMouseweel(event) {
            let e = window.event || event;
            let delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));
            if (delta < 0) {
                // 缩小
                if (this.currentZoomIndex + 1 >= ZOOM.length - 1) {
                    this.currentZoomIndex = ZOOM.length - 1;
                } else {
                    this.currentZoomIndex++;
                }
            } else if (delta > 0) {
                // 放大
                if (this.currentZoomIndex - 1 <= 0) {
                    this.currentZoomIndex = 0;
                } else {
                    this.currentZoomIndex--;
                }
            }
            this.ctx.clearRect(0, 0, this.width, this.height);
            // 重新计算起始时间点，当前时间-新的时间范围的一半
            this.startTimestamp =
                this.currentTime - (ZOOM[this.currentZoomIndex] * ONE_HOUR_STAMP) / 2;
            this.draw();
        },
        //绘制时间段 开始到结束时都在
        drawTimeSegments() {
            const PX_PER_MS =
                this.width / (ZOOM[this.currentZoomIndex] * ONE_HOUR_STAMP); // px/ms
            this.timeSegments.forEach((item) => {
                if (
                    item.beginTime <=
                    this.startTimestamp +
                    ZOOM[this.currentZoomIndex] * ONE_HOUR_STAMP &&
                    item.endTime >= this.startTimestamp
                ) {
                    let x = (item.beginTime - this.startTimestamp) * PX_PER_MS;
                    let w;
                    if (x < 0) {
                        x = 0;
                        w = (item.endTime - this.startTimestamp) * PX_PER_MS;
                    } else {
                        w = (item.endTime - item.beginTime) * PX_PER_MS;
                    }
                    this.ctx.fillStyle = item.style.background;
                    this.ctx.fillRect(x, this.height * 0.6, w, this.height * 0.3);
                }
            });
        },
        // 时间轴结束

        // 获取Section列表
        getSection() {

            let deviceInfo = this.webPlayer.getDeviceDetail(); //获取设备详情
            // console.info(deviceInfo.serviceStatus);
            if (deviceInfo.serviceStatus == 4) return this.$modal.notifyWarning('请先开通云套餐服务');

            // this.webPlayer.on(WebPlayer.WebPlayerEvents.PLAYER_INIT, () => {
            let nowTime = Date.now();
            // let startTime = nowTime - 30 * 24 * 3600 * 1000; //30天前
            let startTime = this.currentTime //开始时间
            let endTime = nowTime; //当前时间
            //全量获取
            this.getSectionList({ startTime, endTime }).then(sectionList => {
                    console.info('sectionList', sectionList);
                    SECTION_LIST = sectionList;

                    let startTime = this.currentTime
                        // console.log(sectionList.slice(-1)[0].start_time > startTime);
                        // console.log(startTime > Date.now());
                    if (startTime > Date.now()) return this.$modal.notifyWarning('不能选择未来时间');
                    if (sectionList.slice(-1)[0].start_time > startTime) return this.$modal.notifyWarning('该时间段内没有录像');
                    let downloadServer = '';
                    let endTime = '';
                    this.live = 2;
                    this.webPlayer.play({ startTime, downloadServer, endTime }); //播放回放

                    //增量获取
                    this.getIncrementalSectionList();
                }).catch(reason => {
                    console.error(reason);
                })
                // });
        },
        //全量获取Section列表
        getSectionList({ startTime, endTime }) {
            let list = [];
            return this.webPlayer.getSectionList({ startTime, endTime })
                .then(({ hasMore, sectionList, endTime }) => {
                    list = list.concat(sectionList);
                    //根据返回值hasMore判断是否仍有数据。
                    if (hasMore) {
                        return getSectionList({ startTime, endTime }).then(function(_list) {
                            return list.concat(_list);
                        });
                    }
                    return list;
                })
        },
        //增量获取最新的Sectoion列表,30秒一次
        getIncrementalSectionList() {
            setInterval(() => {
                let defaultStartTime = Date.now() - 30 * 24 * 3600 * 1000; //30天前
                let startTime = SECTION_LIST.length ?
                    SECTION_LIST[SECTION_LIST.length - 1].endTime :
                    defaultStartTime;
                let endTime = Date.now();
                this.getSectionList({ startTime, endTime })
                    .then(list => {
                        SECTION_LIST = SECTION_LIST.concat(list);
                    });
            }, 30 * 1000);
        },
        // 回放
        playback() {
            // this.live = 2
            this.getSection()
                // let startTime = this.currentTime
                // console.log(startTime);
                // let downloadServer = '';
                // let endTime = '';
                // this.webPlayer.play({ startTime, downloadServer, endTime });
        },
        calendar() {
            console.log(this.currentTime);
            console.log(this.startTimestamp);
            // this.currentTime = '1684476328000'
            // this.startTimestamp = '1684476328000'
            //     // this.drawScaleLine()
            // this.drawTimeSegments(); //绘制时间段
            // this.drawMiddleLine(); //绘制中线  
        }
    },
};